<template>
  <div class="mod-sp__spmatchitemteam">
    <div v-if="dataList && dataList.length > 0" style="margin-bottom: 10px">
      <el-tag size="big">{{ dataList ? dataList[0].matchName : "" }}</el-tag>
      <el-tag size="big" style="margin-left: 10px">{{ dataList ? dataList[0].item : "" }}</el-tag>
      <el-tag size="big" style="margin-left: 10px">{{ dataList ? dataList[0].dictLabel : "" }}</el-tag>
    </div>
    <!--团体赛-参赛队伍-->
    <div>
      <el-card>
        <!--itemType:100201个人赛  100202团体赛-->
        <el-tabs v-model="activeName">
          <el-tab-pane label="参赛队伍" name="first" v-if="dataForm.itemType == '100202'">
            <ren-record-team></ren-record-team>
          </el-tab-pane>
          <el-tab-pane label="选手" name="second" lazy v-if="dataForm.itemType == '100201'">
            <ren-record-student></ren-record-student>
          </el-tab-pane>
          <el-tab-pane label="选手" name="second" lazy v-if="dataForm.itemType == '100202'">
            <ren-record-student-group></ren-record-student-group>
          </el-tab-pane>
          <el-tab-pane label="指导老师" name="third" lazy>
            <ren-record-teacher></ren-record-teacher>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<style>
/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 30px;
}
</style>

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import AddOrUpdate from "./spmatchitemteam-add-or-update.vue";
import baseService from "@/service/baseService";
import app from "@/constants/app";
import qs from "qs";
import { getToken } from "@/utils/cache";
export default defineComponent({
  components: {
    AddOrUpdate
  },
  setup() {
    const state = reactive({
      getDataListURL: "/sp/spmatchitemteam/signRecord",
      createdIsNeed: false,
      activatedIsNeed: false,
      getDataListIsPage: true,
      exportURL: "/sp/spmatchitemteam/export",
      deleteURL: "/sp/spmatchitemteam",
      deleteIsBatch: true,
      dataForm: {
        itemType: "",
        matchName: "",
        item: "",
        matchItemId: "",
        teamId: "",
        teamName: "",
        isRise: "",
        status: "",
        company: "",
        realName: "",
        groupId: "",
        drawOpen: "",
        isDraw: ""
      },
      colData: [
        { title: "score1", istrue: false },
        { title: "score2", istrue: false }
      ],
      activeName: "first"
    });
    return { ...useView(state), ...toRefs(state) };
  },
  watch: {},
  mounted() {
    //获取上个页面传来的参数
    this.dataForm.matchItemId = this.$route.query.matchItemId + "";
    this.dataForm.groupId = this.$route.query.id + "";
    this.dataForm.itemType = this.$route.query.itemType + "";
    this.dataForm.drawOpen = this.$route.query.drawOpen + "";
    this.dataForm.isDraw = this.$route.query.isDraw + "";

    if (this.dataForm.itemType == "100201") {
      this.activeName = "second";
    }
  },
  methods: {
    //查询赛项详情
    queryBaseMatchItem() {
      baseService.post("/sp/spmatchitem/queryBaseMatchItem", { id: this.dataForm.matchItemId }).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        } else {
          let data = res.data;
          let scores = data.scores;
          if (scores) {
            let scoreArr = scores.split(",");
            for (let i = 0; i < scoreArr.length; i++) {
              if (scoreArr[i] === "score1") {
                this.colData[0].istrue = true;
              }
              if (scoreArr[i] === "score2") {
                this.colData[1].istrue = true;
              }
            }
            console.log(this.colData);
          }
        }
      });
    },
    zhengshuHandle() {
      let ids: string[] = [];
      for (let i = 0; i < this.dataListSelections!.length; i++) {
        ids.push(this.dataListSelections![i].id);
      }
      window.location.href = `${app.api}/sp/spmatchitemteam/downloadFile?${qs.stringify({
        ...this.dataForm,
        token: getToken(),
        ids: ids.join(",")
      })}`;
    }
  }
});
</script>
